@import "../styles/variables";

$active-color:	#aacbe1;
$normal-color:	#c9c9c9;

.date-picker-holder {
	display: inline-block;
	position: relative;
	width: 210px;

	&.ng-empty .date-picker-clear,
	&.disabled .date-picker-clear {
		display: none;
	}
}

.date-picker {
	background: #fff;
	border: 1px solid #d9d9d9;
	color: $normal-color;
	font-size: 12px;
	line-height: 28px;
	overflow: hidden;
	position: relative;

	.date-picker-input {
		border: 0 !important;
		box-shadow: none;
		box-sizing: content-box;
		color: #3d3d3d;
		font-family: $font-family;
		font-size: 12px;
		height: 28px;
		line-height: 28px;
		outline: 0;
		padding: 0 1px;
		width: 21px;

		&.ng-not-empty + .delimiter {
			color: #3d3d3d;
		}
	}

	&.disabled .date-picker-input {
		background: #eee;
		color: #999;
	}

	.date-picker-input-year {
		padding-left: 8px;
		width: 28px;
	}

	.date-picker-input-month {
		width: 18px;
	}

	.date-picker-input-date {
		width: 18px;
	}

	.date-picker-input-hour {
		width: 14px;
	}

	.date-picker-input-minute {
		width: 21px;
	}

	.date-picker-input-second {
		width: 14px;
	}

	.date-picker-icon {
		position: absolute;
		right: 0.5em;
		top: 0;
	}

	.date-picker-clear {
		position: absolute;
		right: 2em;
		top: 1px;
	}

	&.active {
		border-color: $active-color;

		.date-picker-icon {
			color: $active-color;
		}
	}

	&.disabled {
		background: #eee;
	}

	&.ng-invalid.ng-dirty {
		border-color: $color-error;

		.date-picker-icon {
			color: $normal-color;
		}
	}

	&.disabled .date-picker-clear {
		display: none;
	}
}
